<script setup>
import router from '@/router';
const downLoad = (e) => {
  // 阻止a链接默认行为
  e.preventDefault()
  router.push('/download')
  window.scrollTo({top: 0, behavior: 'smooth'})
}
const about = (e) => {
  // 阻止a链接默认行为
  e.preventDefault()
  router.push('/about')
  window.scrollTo({top: 0, behavior: 'smooth'})
}

</script>

<template>
<div class="page">
    <div class="top">
        <div class="row top-content" style="width: 100%;">
            <div class="col col-left">
                <div class="sao">
                    <img class="code" src="../assets/code.jpg" alt=""/>
                    <p>扫一扫</p>
                </div>
            </div>
            <div class="col col-right">
                <ul class="col-ul">
                    <h5 class="col-h5">网站导航</h5>
                    <li class="ul-item">
                        <a class="navbar-brand" href="#">产品介绍</a>
                    </li>
                    <li class="ul-item">
                        <a @click="about" class="navbar-brand" href="#">关于我们</a>
                    </li>
                    <li class="ul-item">
                        <a @click="downLoad" class="navbar-brand" href="">软件下载</a>
                    </li>
                </ul>
                <div class="col-div">
                    <!-- <div>
                        <p class="consult">咨询热线</p>
                        <p>111111111</p>
                    </div> -->
                    <div>
                        <p class="address">联系地址</p>
                        <p>吉林省长春市净月开发区昆玉府9号楼1608</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom"> 
        <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=22017202000408" style="text-decoration:none;height:20px;line-height:20px;">
            <img src="https://gw.alicdn.com/tfs/TB1jwakrbH1gK0jSZFwXXc7aXXa-20-20.png" style="vertical-align: -2px;margin-right: 4px;" alt="">
            吉公网安备 22017202000408
        </a>
        <a style="text-decoration:none;height:20px;line-height:20px;" href="https://beian.miit.gov.cn/">
            吉ICP备2023006006号
        </a>
    © 2023 Jilin Xingcheng Cultural Media Co., Ltd. All rights reserved.</div>
</div>
</template>

<style lang='scss' scoped>

@media screen and (max-width: 1500px) {
    .col-div{
        display: none !important;
    }
}
@media screen and (max-width: 750px) {
    .col-right{
        display: none !important;
    }
}
    .page{
        width: 100%;
        height: 394px;
        background-color: #fff;
        color: #fff;
        .top{
            height: 316px;
            background-color: rgb(48,49,51);
            .top-content{
                width: 100%;
                .col-left{
                    padding: 40px 100px;
                    .sao{
                        width: 150px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        font-size: 24px;
                        color: #fff;
                        .code{
                            width: 150px;
                            height: 150px;
                            margin-bottom: 16px;
                        }
                    }
                }
                .col-right{
                    display: flex;
                    padding: 40px;
                    .col-ul{ 
                    height: 236px;
                    width: 140px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    text-align: left;
                    margin-right: 120px;
                    .col-h5{
                        font-size: 24px;
                        font-weight: 700;
                    }
                    .ul-item{
                        display: inline-block;
                        list-style: none;
                    }
                    }
                    .col-div{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 216px;
                        text-align: left;
                        p{
                            margin: 0;
                        }
                        .consult{
                            font-size: 24px;
                            font-weight: 700;
                            margin-bottom: 16px;
                        }
                        .address{
                            font-size: 24px;
                            font-weight: 700;
                            margin-bottom: 16px;
                        }
                    }
                }
                
            }
        }
        .bottom{
            height: 78px;
            text-align: center;
            line-height: 78px;
            color: rgb(48,49,51);
            font-size: 18px;
        }
    }
</style>